<template>
  <div class="people-pay">
    <div class="people-pay-header">
      <el-radio-group v-model="radio1" @change="requestData">
        <el-radio-button label="已通过"></el-radio-button>
        <el-radio-button label="申请中"></el-radio-button>
      </el-radio-group>
    </div>
    <table-list
      :toTableData="tableData"
      :tableHeader="tableHeader"
      :deleteEdit="deleteEdit"
      :btn1="btn1"
      :btn2="btn2"
      @btn1="handDelete"
      @btn2="handlAllow"
    ></table-list>
    <!-- <div class="people-pay-table">
      <table-list
        :toTableData="tableData"
        :tableHeader="tableHeader"
        :deleteEdit="deleteEdit"
        :btn1="btn1"
        :btn2="btn2"
      ></table-list>
    </div> -->

    <!-- <el-alert title="成功提示的文案" type="success"> </el-alert> -->
  </div>
</template>

<script>
import { request } from "@/network/request.js";
import TableList from "@/components/common/TableList.vue";

export default {
  name: "vueName",
  data() {
    return {
      radio1: "申请中",
      tableHeader: [
        { prop: "name", label: "姓名" },
        { prop: "gender", label: "性别" },
        { prop: "phone", label: "电话" },
        { prop: "address", label: "住址" },
        { prop: "time", label: "时间" },
      ],
      tableData: [], //传递给子组件数据
      deleteEdit: {
        options: 1,
        delete: 0,
        edit: 1,
      },
      btn1: "删除",
      btn2: "通过",
    };
  },
  components: {
    TableList,
  },
  created() {
    this.requestData();
  },

  methods: {
    requestData() {
      console.log("555");
      return new Promise((resove, reject) => {
        request({
          url: "/all-needpay-info",
        })
          .then((res) => {
            // console.log(res);
            if (this.radio1 == "申请中") {
              this.deleteEdit.delete = 0;
              this.deleteEdit.edit = 1;
              this.tableData = res.data.data.sort((a, b) => {
                return a.id < b.id ? 1 : -1;
              });
              this.tableHeader = [
                { prop: "name", label: "姓名" },
                { prop: "gender", label: "性别" },
                { prop: "phone", label: "电话" },
                { prop: "address", label: "住址" },
                { prop: "time", label: "时间" },
              ];
              this.tableData = this.tableData.map((res) => {
                // res.gender == 1 ? "男" : "女";
                if (res.gender == 1) {
                  res.gender = "男";
                  // return res;
                } // res.gender == 1 ? "男" : "女";
                if (res.gender == 0) {
                  res.gender = "女";
                  // return res;
                }
                return res;
              });
            } else if (this.radio1 == "已通过") {
              this.deleteEdit.delete = 1;
              this.deleteEdit.edit = 0;
              request({
                url: "/all-needpay",
              }).then((res) => {
                this.tableData = res.data.data.sort((a, b) => {
                  return a.id < b.id ? 1 : -1;
                });
                this.tableHeader = this.tableHeader.slice(0, 3);

                this.tableData = this.tableData.map((res) => {
                  // res.gender == 1 ? "男" : "女";
                  if (res.gender == 1) {
                    res.gender = "男";
                    // return res;
                  }
                  if (res.gender == 0) {
                    res.gender = "女";
                    // return res;
                  }
                  return res;
                });
              });
            }

            resove();
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    handlAllow(row) {
      console.log(row);
      request({
        method: "post",
        url: "/set_all_needpay",
        data: {
          openid: row.openid,
          name: row.name,
          age: row.age,
          gender: row.gender,
          phoneNum: row.phone,
          address: row.address,
        },
      })
        .then((res) => {
          console.log(res);
          this.requestData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handDelete(row) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          request({
            method: "post",
            url: "/delete_all_needpay", //传入confing,在baseURL后面的值
            data: {
              openid: row.openid,
            },
          })
            .then((res) => {
              this.requestData();
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.people-pay {
  box-sizing: border-box;
  // margin: 20px;
  width: 100%;
  // height: 100%;
  // padding: 20px;、
  .people-pay-header {
    padding: 20px 20px 0 20px;
    box-sizing: border-box;
  }
  // .people-pay-table {
  //   // height: 100%;
  //   // background-color: #ffffff;
  //   // padding: 0 10px;
  //   // padding: 20px;
  //   box-sizing: border-box;
  //   // overflow: scroll;
  //   // overflow-y: scroll;
  //   .pagination {
  //     padding-top: 10px;
  //     padding-bottom: 100px;
  //     display: flex;
  //     @include right;
  //     background-color: #ffffff;
  //   }
  // }
}
</style>
